<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />	
		<title>Team Project</title>
		
		<script type="text/javascript" src="jQuery.js"></script>
		
		<link rel="stylesheet" href="style.css">
			
	</head>
  
	<body id="login">
		<div id="wrapper">
		<div id="login-wrapper" class="png_bg">
			<div id="login-top">
				<img src="treemoLabs-logo.png" alt="Treemo Labs Dashboard" title="Powered By Treemo Labs" />			
			</div>
			
			<div id="login-content">
								<div class="error"><!--to unhide if error-->
					Invalid Username				</div>
								<form method="post">					
					<p>
						<label>Username</label>
						<input placeholder="Username" id="user" name="username" class="text-input" type="text" />
					</p>
					<br style="clear: both;" />
					<p>
						<label>Password</label>
						<input id="pass" name="password" class="text-input" type="password" placeholder="Password"/>
					</p>
					<br style="clear: both;" />
					<p>
						<input class="button" id="submit" type="submit" value="Sign In" />
					</p>
					
				</form>
			</div>
		</div>
		<div id="dummy"></div>
		<div id="dummy2"></div>
        </div>
       <script type="text/javascript">
           $("#submit").on('click', function (ev) {
               ev.stopPropagation();
               ev.preventDefault();
               var user = document.getElementById("user").value;
               var pass = document.getElementById("pass").value;
               $.post("login.php", {username: user, password: pass} ).done(function(data){
               	if (data === "TRUE") {
               		window.location = "add.php";
               	}
               })

           });
           initDatabase();
           function initDatabase() {
               var data = [{ "pesho": "secret" }, { "sasho": "123" }, { "mimi": "qwe" }];
               for (obj in data) {
                   for (key in data[obj]) {
                       //console.log(key + " " + data[obj][key]);
                       localStorage.setItem(key, data[obj][key]);
                   }        
               }
           }
           function clearHtml() {
               $("#wrapper").empty();
           }
           function getNewView() {
               //append new html here
               $("#wrapper").append("<p>Create new view here</p>");
           }
		</script>
  </body>
</html>